import { defineComponent, ref, reactive, onMounted, withKeys } from "vue"
import { useRouter } from "vue-router"
import { ElMessage } from "element-plus";
import { Search } from "@element-plus/icons-vue";
import { getList as listAPI, delListItem } from "@/api/service-event"
import Header from "@/components/Header.vue"
import FilterBar from "@/components/FilterBar.vue"
import StartFlow from './components/StartFlow.vue'
import DynamicTable from "@/components/DynamicTable"
import ActiveToggle from './components/ActiveToggle'

export default defineComponent({
  name: "MeansServiceEvent",
  setup (props) {
    const router = useRouter()

    const list = ref([])
    const page = reactive({ current: 1, size: 20, keyword: '' })
    const total = ref(0)
    const loading = ref(false)
    const tableColumns = ref([
      { label: "工作流名称", key: "nameCn" },
      { label: "工作流英文名称", key: "name" },
      { label: "部门", key: "orgName" },
      { label: "事件", key: "eventName" },
      {
        label: "激活状态",
        render: (h, params) => (
          <ActiveToggle
            data={params.row}
            onUpdate:list={() => { getList(page.current, page.size) }}
          />
        )
      },
      {
        label: "操作",
        fixed: 'right',
        width: 200,
        render: (h, params) => (
          <>
            <el-button
              type="text"
              size="small"
              onClick={() => openEditPage(params.row, params.index)}
            >
              编辑
            </el-button>
            <el-button
              type="text"
              size="small"
              onClick={() => handleDelete(params.row)}
            >
              删除
            </el-button>
            <el-button
              type="text"
              size="small"
              onClick={() => handleStart(params.row)}
            >
              开始
            </el-button>
            <el-button
              type="text"
              size="small"
              onClick={() => openHistory(params.row)}
            >
              进度管理
            </el-button>
          </>
        )
      },
    ])
    const reset = () => {
      page.keyword = ""
      getList()
    }
    // 获取列表数据
    const getList = async (pageNumber = 1, size = 20) => {
      page.current = pageNumber
      page.size = size
      loading.value = true
      const { status, data, message } = await listAPI({ ...page })
      loading.value = false
      if (status === 200) {
        total.value = data.total
        list.value = data.list.map(item => {
          return {
            ...item,
            // 当激活状态数据为null时, el-switch组件会自动改为false,这时候就报错了
            activated: item.activated === null ? false : item.activated 
          }
        })
      } else {
        ElMessage.warning(message);
      }
    }

    // 跳转到编辑页面
    const openEditPage = (row) => {
      router.push({ name: 'MeansServiceEventEdit', params: { id: row.id } })
    }

    // 删除
    const handleDelete = async (row) => {
      const res = await delListItem(row.id)
      if (res.status === 200) {
        ElMessage({
          type: 'success',
          message: '删除成功!'
        });
        getList()
      } else {
        ElMessage({
          type: 'warning',
          message: res.message
        });
      }
    }

    const flowStartDialog = ref(null) // 开始弹窗组件
    // 执行流程
    const handleStart = async (row) => {
      flowStartDialog.value.handleOpen(row) // 调研组件open方法
    }

    // 跳转到运行记录页面
    const openHistory = (row) => {
      router.push({
        name: 'MeansServiceEventHistory',
        params: {
          name: row.name,
          nameCn: row.nameCn
        }
      })
    }

    onMounted(() => {
      getList()
    })

    return () => (
      <div class="container">
        <Header onRefresh={() => { getList() }} />
        <div class="page-main">
          <div class="page-main-query">
            <FilterBar
              v-slots={{
                left: () => <span>
                <el-input
                    v-model={page.keyword}
                    class="input"
                    placeholder="搜索关键字"
                    onInput={() => {getList()}}
                  />
                   <el-button
                  slot="right"
                  type="primary"
                  onClick={() => reset()}
                >
                  重置
                </el-button>
     
                </span>
                ,
                // onKeyup={withKeys(() => {getList()}, ["enter"])}
                // v-slots={{
                //   append: () => <el-button onClick={() => {getList()}} icon={Search} />
                // }}
                right: () => <el-button
                  slot="right"
                  type="primary"
                  onClick={() => router.push({ name: 'MeansServiceEventEdit' })}
                >
                  新增
                </el-button>
              }}
            />
          </div>
          <DynamicTable
            ref="DynamicTable"
            v-loading={loading.value}
            class="table-container"
            total={total.value}
            v-model:current={page.current}
            v-model:size={page.size}
            data={list.value}
            columns={tableColumns.value}
            onPagination={() => getList()}
          />
        </div>

        <StartFlow ref={flowStartDialog} />
      </div>
    )
  }
})
